<html>
  <head>
	<script type="text/javascript" src="jquery.1.3.2.min.js"></script>
    <script> 
	function startPopup(text) {
		chrome.extension.getBackgroundPage().getSelection(addDeliciousFromPopup);
	};
	// Trigger delicious window
	function addDeliciousFromPopup(text) {
		chrome.tabs.getSelected(null, function(tab) {
			chrome.extension.sendRequest({
				type: 'addDelicious',
				url: tab.url,
				title: tab.title,
				notes: text
			});
		});
	};
	$(document).ready(function() {
		$(window).load(function(){
			
			$("#bookmarks ul li").remove();
			var username_stored = localStorage.getItem("username");
			var tag_stored = localStorage.getItem("tag");
			$('#username').val(username_stored);
			$('#tag').val(tag_stored);
			if(localStorage.getItem("tag")) {
				$('#tag_display').html(" (tagged: <a target=\"_blank\" href=\"http://delicious.com/"+ username_stored +"/"+ tag_stored +"\">"+ tag_stored +"</a>)");
			}
			// This cross-domain request requires that you use '?callback=?' because it is done using JSONP
			$.getJSON('http://feeds.delicious.com/v2/json/' + username_stored + '/' + tag_stored + '?count=10&callback=?',
			function(json){
				// json contains the response provided by the server
				// You can use console.log(json) to examine the response
			   $(json).each(function(index) {
				   // this.u // url
				   // this.d // description
				   // this.n // extended notes
				   // this.t // array of tags
			
					// Create an HTML string for the bookmark
					// We also use the .data method to store the notes and tags
					// of the bookmark in the DOM with the object
					// Finally, we add it to the list of bookmarks
				   $('<li>').html('<a href="' + this.u + '" target="_blank">' + this.d + '</a><br />')
					.data('extended', this.n)
					.data('tags', this.t)
					.appendTo('#bookmarks ul');
			   });
			   console.log(json)
				$("#bookmarks li:even").addClass("even");
			});
			return false;
		});
	});
    </script>
    <link rel="stylesheet" href="style.css" type="text/css"> 
  </head>
  <body class="delicious">
	<div class="toolstrip-button" onclick="startPopup()">Save a new Bookmark</div>
	<div class="toolstrip-button" onclick="window.open('http://del.icio.us/home/')">Bookmarks on Delicious</div>
	<div class="toolstrip-button" onclick="window.open('http://del.icio.us/inbox/')">Delicious Inbox</div>
	<div id="bookmarks">
		<h3>Recent Bookmarks<span id="tag_display"></span>:</h3>
		<ul></ul>
		<p><small><a href="javascript:window.open(chrome.extension.getURL('options.html'));">Edit Options</a></small></p>
	</div>
	
  </body>
</html>